<template>
  <!--中期检查表-->
  <div class="edu-page-warp mid-term">
    <DesignCard :title="$t('graduationDesign.studentInfo')" v-if="actionType !== 'ADD' && actionType !== 'EDIT'">
      <el-form :model="studentForm" ref="studentForm" label-position="right" label-suffix="：" label-width="150px">
        <el-row>
          <el-col :span="6">
            <el-form-item :label="$t('graduationDesign.studentId')">
              <span>{{studentForm.studentId}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('graduationDesign.name')">
              <span>{{studentForm.studentName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('graduationDesign.college')">
              <span>{{studentForm.collegeI18n}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('graduationDesign.major')">
              <span>{{studentForm.subjectName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('graduationDesign.direction')">
              <span>{{studentForm.directionName}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </DesignCard>

    <DesignCard :title="$t('graduationDesign.midTermCheckStudentSelfExam')" :showExpand="actionType !== 'ADD' && actionType !== 'EDIT'">
      <el-form :model="midTermForm" ref="midTermForm" :rules="midTermRules" label-position="right" label-suffix="：" label-width="260px" :disabled="actionType === 'REVIEW' || actionType === 'VIEW' || actionType === 'REVIEW_VIEW'">
        <el-row>
          <el-col :span="8">
            <el-form-item :label="$t('graduationDesign.session')" label-width="150px">
              <el-input v-model="midTermForm.grade" class="mid-input-select" :placeholder="$t('graduationDesign.graduationYear')" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('graduationDesign.college')" label-width="150px">
              <el-input v-model="midTermForm.collegeI18n" class="mid-input-select" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('graduationDesign.major')" label-width="150px">
              <el-input v-model="midTermForm.subjectIdI18n" class="mid-input-select" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('graduationDesign.subjectName')" label-width="150px">
              <el-input v-model="midTermForm.projectName" class="mid-input-select" :placeholder="$t('graduationDesign.pleaseEnter')" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <p class="mid-term-title">{{$t('graduationDesign.myTimeAndEnergy')}}</p>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('graduationDesign.averageWorkHourPerWeek')" prop="workHour">
              <el-input v-model="midTermForm.workHour" :placeholder="$t('graduationDesign.pleaseEnter')" maxlength="5"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item :label="$t('graduationDesign.effectTimeAndEnergyReason')">
              <el-checkbox-group v-model="influReasonList">
                <el-checkbox :label="'1'">{{$t('graduationDesign.findJob')}}</el-checkbox>
                <el-checkbox :label="'2'">{{$t('graduationDesign.personalReason')}}</el-checkbox>
                <el-checkbox :label="'3'">{{$t('graduationDesign.otherReason')}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>

        <p class="mid-term-title">{{$t('graduationDesign.mentorInput')}}</p>
        <el-row>
          <el-col>
            <el-form-item :label="$t('graduationDesign.mentorWeeklyGuideNumber')">
              <el-radio-group v-model="midTermForm.guideTime">
                <el-radio :label="1">{{$t('graduationDesign.lessThanOneTime')}}</el-radio>
                <el-radio :label="2">{{$t('graduationDesign.oneTime')}}</el-radio>
                <el-radio :label="3">{{$t('graduationDesign.twoTimeAndAbove')}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item :label="$t('graduationDesign.guideForm')">
              <el-checkbox-group v-model="guideWayList">
                <el-checkbox :label="'1'">{{$t('graduationDesign.internet')}}</el-checkbox>
                <el-checkbox :label="'2'">{{$t('graduationDesign.phone')}}</el-checkbox>
                <el-checkbox :label="'3'">{{$t('graduationDesign.faceToFace')}}</el-checkbox>
                <el-checkbox :label="'4'">{{$t('graduationDesign.other')}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item :label="$t('graduationDesign.guideEffect')">
              <el-radio-group v-model="midTermForm.guideEffect">
                <el-radio :label="1">{{$t('graduationDesign.fine')}}</el-radio>
                <el-radio :label="2">{{$t('graduationDesign.better')}}</el-radio>
                <el-radio :label="3">{{$t('graduationDesign.general')}}</el-radio>
                <el-radio :label="4">{{$t('graduationDesign.difference')}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <p class="mid-term-title">{{$t('graduationDesign.graduationDesignWorkStatus')}}</p>
        <el-row>
          <el-col>
            <el-form-item :label="$t('graduationDesign.completeWorkStatus')">
              <el-radio-group v-model="midTermForm.projectRate">
                <el-radio :label="1">{{$t('graduationDesign.lessThanThirtyPercent')}}</el-radio>
                <el-radio :label="2">30%-50%</el-radio>
                <el-radio :label="3">{{$t('graduationDesign.overFiftyPercent')}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('graduationDesign.subjectDifficulty')">
              <el-radio-group v-model="midTermForm.projectDiffi">
                <el-radio :label="1">{{$t('graduationDesign.higher')}}</el-radio>
                <el-radio :label="2">{{$t('graduationDesign.appropriate')}}</el-radio>
                <el-radio :label="3">{{$t('graduationDesign.easy')}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('graduationDesign.subjectCombinWithMajor')">
              <el-radio-group v-model="midTermForm.projectProfess">
                <el-radio :label="1">{{$t('graduationDesign.yes')}}</el-radio>
                <el-radio :label="2">{{$t('graduationDesign.no')}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('graduationDesign.manualLearningSituation')">
              <el-radio-group v-model="midTermForm.projectSitu">
                <el-radio :label="1">{{$t('graduationDesign.selfStudy')}}</el-radio>
                <el-radio :label="2">{{$t('graduationDesign.collective')}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <p class="mid-term-title">{{$t('graduationDesign.workProblemAndSolution')}}</p>
        <el-row>
          <el-col>
            <el-form-item label-width="35px">
              <el-input type="textarea" v-model="midTermForm.nowStep" :rows="4" show-word-limit :placeholder="$t('graduationDesign.pleaseEnter')" maxlength="2000"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <p class="mid-term-title">{{$t('graduationDesign.nextStageWorkPlanResearchContent')}}</p>
        <el-row>
          <el-col>
            <el-form-item label-width="35px">
              <el-input type="textarea" v-model="midTermForm.nextStep" :rows="4" show-word-limit :placeholder="$t('graduationDesign.pleaseEnter')" maxlength="2000"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <div class="edu-opertion-bar bottom-line" v-if="actionType === 'ADD' || actionType === 'EDIT'">
          <div class="float-right bottom-btn">
            <el-button @click="onCancel">{{$t('graduationDesign.cancel')}}</el-button>
            <el-button type="primary" @click="onSave">{{$t('graduationDesign.save')}}</el-button>
            <el-button type="primary" @click="onSubmit">{{$t('graduationDesign.submit')}}</el-button>
          </div>
        </div>
      </el-form>
    </DesignCard>

    <DesignCard :title="$t('graduationDesign.review')" v-if="actionType === 'REVIEW'">
      <el-form :model="reviewForm" ref="reviewForm" :rules="reviewRules" label-position="right" label-suffix="：" label-width="150px">
        <el-form-item :label="$t('graduationDesign.reviewOpioion')" prop="content">
          <el-input type="textarea" v-model="reviewForm.content" :rows="4" show-word-limit :placeholder="$t('graduationDesign.pleaseEnter')" maxlength="500"></el-input>
        </el-form-item>
        <div class="edu-opertion-bar">
          <div class="float-right bottom-btn">
            <el-button @click="onCancel">{{$t('graduationDesign.cancel')}}</el-button>
            <el-button type="danger" @click="onReject">{{$t('graduationDesign.reject')}}</el-button>
            <el-button type="primary" @click="onPass">{{$t('graduationDesign.pass')}}</el-button>
          </div>
        </div>
      </el-form>
    </DesignCard>

    <DesignCard :title="$t('graduationDesign.reviewProgress')" v-if="actionType === 'REVIEW_VIEW' || actionType === 'REVIEW'">
      <edu-table ref="reviewProgressTable" :data="progressData" :selection="false" :pagination="false">
        <edu-table-column :label="$t('graduationDesign.time')" prop="time" :formatter="formatDate" min-width="120"></edu-table-column>
        <edu-table-column :label="$t('graduationDesign.approvers')" min-width="100">
          <template slot-scope="scope">
            <span>{{scope.row.approvorName}}【{{scope.row.approvorId}}】</span>
          </template>
        </edu-table-column>
        <edu-table-column :label="$t('graduationDesign.role')" prop="role" min-width="90"></edu-table-column>
        <edu-table-column :label="$t('graduationDesign.approvalResult')" prop="result" min-width="90">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.result === 'COMMIT'" type="success">{{$t('graduationDesign.submit')}}</el-tag>
            <el-tag v-if="scope.row.result === 'Process'" type="success">{{$t('graduationDesign.pass')}}</el-tag>
            <el-tag v-if="scope.row.result === 'End'" type="info">{{$t('graduationDesign.over')}}</el-tag>
            <el-tag v-if="scope.row.result === 'Reject'" type="warning">{{$t('graduationDesign.rejected')}}</el-tag>
          </template>
        </edu-table-column>
        <edu-table-column :label="$t('graduationDesign.approvalRemark')" prop="content" min-width="120"></edu-table-column>
      </edu-table>
    </DesignCard>
  </div>
</template>
<script>
import filters from "common/src/filters";

export default {
  name: 'midTermCheckInfo',
  props: {
    studentForm: {
      type: Object,
      default: {}
    },
    midTermForm: {
      type: Object,
      default: {
        workHour: '',
        influReason: '',
        guideTime: '',
        guideWay: '',
        guideEffect: '',
        projectRate: '',
        projectDiffi: '',
        projectProfess: '',
        projectSitu: '',
        nowStep: '',
        nextStep: '',
        grade: '',
        college: '',
        subjectId: '',
        projectName: ''
      }
    },
    progressData: {
      type: Array,
      default: []
    },
    actionType: {
      type: String,
      default: ""
    }
  },
  data() {
    const validateWorkHour = (rule, value, callback) => {
      const patternInteger = /^(\d|[1-9]\d*)$/;
      if (patternInteger.test(value) || !value) {
        return callback();
      } else {
        return callback(new Error(this.$t('graduationDesign.pleaseEnterInteger')));
      }
    };
    return {
      source: {
        collegeOptions: [], // 学院
        subjectOptions: [], // 专业
      },
      midTermRules: {
        workHour: [
          { validator: validateWorkHour, trigger: 'blur' }
        ]
      },
      reviewForm: {},
      reviewRules: {
        content: [
          { required: true, message: this.$t('graduationDesign.pleaseEnter'), trigger: 'blur' }
        ]
      },
      influReasonList: [], // 影响原因
      guideWayList: [] // 指导形式
    };
  },
  mounted() {
    this.influReasonList = this.midTermForm.influReason ? this.midTermForm.influReason.split(",") : [];
    this.guideWayList = this.midTermForm.guideWay ? this.midTermForm.guideWay.split(",") : [];
  },
  methods: {
    formatDate(row, column, cellValue, index) {
      return filters.formatDate(cellValue, "yyyy/MM/dd hh:mm:ss");
    },
    // 保存
    onSave() {
      this.midTermForm.influReason = this.influReasonList.join(",");
      this.midTermForm.guideWay = this.guideWayList.join(",");
      this.$refs.midTermForm.validate(valid => {
        if (valid) {
          this.$emit("mid-term-save", this.midTermForm, this.actionType);
        } else {
          return false;
        }
      });
    },
    // 提交
    onSubmit() {
      this.midTermForm.influReason = this.influReasonList.join(",");
      this.midTermForm.guideWay = this.guideWayList.join(",");
      this.midTermForm.studentId=this.studentForm.studentId;
      this.midTermForm.collegeI18n=this.studentForm.collegeI18n;
      this.midTermForm.directionName=this.studentForm.directionName;
      this.$refs.midTermForm.validate(valid => {
        if (valid) {
          this.$emit("mid-term-submit", this.midTermForm);
        } else {
          return false;
        }
      });
    },
    // 通过("1")
    onPass() {
      const data = {
        type: "1",
        grade: this.midTermForm.grade,
        no: this.midTermForm.flowNo,
        content: this.reviewForm.content
      };
      // this.reviewRules.content = [];
      // this.$refs.reviewForm.clearValidate();
      this.$refs.reviewForm.validate(valid => {
        if (valid) {
          this.$emit("mid-term-pass", data);
        } else {
          return false;
        }
      });
    },
    // 驳回("2")
    onReject() {
      const data = {
        type: "2",
        grade: this.midTermForm.grade,
        no: this.midTermForm.flowNo,
        content: this.reviewForm.content
      };
      // this.reviewRules.content = [{ required: true, message: '请输入', trigger: 'blur' }];
      this.$refs.reviewForm.validate(valid => {
        if (valid) {
          this.$emit("mid-term-reject", data);
        } else {
          return false;
        }
      });
    },
    // 取消
    onCancel() {
      this.$emit("mid-term-cancel");
    }
  }
}
</script>
<style lang="scss" scoped>
.mid-term {
    .mid-term-title {
        font-weight: bold;
        color: #606266;
        margin: 15px 35px 30px;
    }
    .mid-input-select {
        width: 100%;
    }
    .bottom-line {
        border-top: 1px solid #dcdfe6;
        .bottom-btn {
            margin-top: 20px;
        }
    }
    .prompt-bottom {
        margin-top: 0px;
        margin-bottom: 15px;
    }
}
</style>
